<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="UTF-8">
  <title>角色管理 - TyFast Platform</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--/* 共用JS与CSS */-->
  <th:block th:replace="assets/include :: scriptcss"/>
</head>
<body>
  <v-app id="app" v-cloak>
    <!-- 顶部功能区 -->
    <v-app-bar app flat color="white">
      <th:block th:replace="assets/include :: header"/>
    </v-app-bar>

    <!-- 左侧区域::导航菜单 -->
    <th:block th:replace="assets/include :: navMenu"/>

    <!-- 主体部分 -->
    <v-main>
      <!-- 主体容器 -->
      <v-container fluid>
        <v-card flat class="rounded-0 pa-6">
          <!-- 查询条件 -->
          <v-form ref="queryForm">
            <v-row>
              <v-col cols="12" sm="6" md="3">
                <v-text-field hide-details outlined dense clearable label="角色名称" v-model="param.roleName"></v-text-field>
              </v-col>
              <v-col class="text-right">
                <v-btn depressed large color="primary mr-1" @click="doQuery">查询</v-btn>
                <v-btn depressed large outlined text @click="resetQueryForm">重置</v-btn>
              </v-col>
            </v-row>
          </v-form>

          <!-- 数据表格 -->
          <v-row shiro:hasPermission="/system/role/save">
            <v-col>
              <v-btn depressed color="primary" class="pr-5 pl-4" @click="openFormDialog('新增角色')">
                <v-icon small>mdi-plus</v-icon>
                新增
              </v-btn>
            </v-col>
          </v-row>

          <v-row>
            <v-col>
              <v-data-table
                  :headers="datatable.headers"
                  :items="datatable.items"
                  item-key="roleId"
                  hide-default-footer
                  disable-sort="true"
                  disable-pagination="true"
                  fixed-header
                  :no-data-text="noDataText"
                  :loading-text="dataLoadingText"
                  :loading="loading"
              >
                <template v-slot:item.operation="{item}">
                  <a class="mr-2" @click="openWinDrawer(item.roleId, item.roleName)">权限分配</a>
                  <a shiro:hasPermission="/system/role/update" class="mr-2" @click="openFormDialog('修改角色', item.roleId)">修改</a>
                  <shiro:hasPermission name="/system/role/del">
                    <th:block th:replace="assets/include :: deleteBtn('item.roleId', 'posting', 'doDelete(item.roleId)')"/>
                  </shiro:hasPermission>
                </template>
              </v-data-table>
              <v-pagination class="pagebar mt-2" :disabled="loading" v-model="pagination.page" :length="pagination.totalPages" :total-visible="pagination.vp" @input="doQuery" v-show="pagination.totalPages > 0"/>
            </v-col>
          </v-row>
        </v-card>

        <!-- 数据表单模态窗口 -->
        <v-dialog persistent v-model="winDialog" width="800">
          <validation-observer ref="observer" v-slot="{handleSubmit}">
            <v-form ref="dataForm" @submit.prevent="handleSubmit(doSubmit)">
              <v-card :loading="posting">
                <v-toolbar dark color="indigo" class="mb-4">
                  <v-toolbar-title>{{dialogTitle}}</v-toolbar-title>
                  <v-spacer></v-spacer>
                  <v-btn icon dark @click="closeFormDialog">
                    <v-icon>mdi-close</v-icon>
                  </v-btn>
                </v-toolbar>
                <v-card-text>
                  <!-- 数据表单 -->
                  <validation-provider v-slot="{ errors }" name="角色名称" rules="required|max:30">
                    <v-text-field outlined dense clearable :error-messages="errors" v-model.trim="formData.roleName" label="角色名称"></v-text-field>
                  </validation-provider>
                  <validation-provider v-slot="{ errors }" name="备注" rules="max:200">
                    <v-textarea outlined dense clearable :error-messages="errors" v-model.trim="formData.remark" label="备注"></v-textarea>
                  </validation-provider>
                </v-card-text>
                <v-card-actions class="justify-end">
                  <v-btn large color="primary" type="submit" :loading="posting">保存</v-btn>
                </v-card-actions>
              </v-card>
            </v-form>
          </validation-observer>
        </v-dialog>
      </v-container>
    </v-main>

    <!--/* 导入授权模块的代码片段 */-->
    <th:block th:replace="system/role/role-menu :: grant"/>
  </v-app>

  <!-- 业务js -->
  <script type="text/javascript" th:src="@{/js/system/role/role.js}"></script>
  <script type="text/javascript">
    // 初始化Vue
    let app = new Vue({
      el: "#app",
      mixins: [roleMixin, grantMixin]
    });
  </script>
</body>
</html>